import React, { Component } from 'react'
import "./teacher.scss"
import Header from '../../components/Header/header'
import Footer from '../../components/Footer/footer'                                                                  
import {  getApiTeachersList } from "../../axios/api"
import { Pagination } from 'antd';
import 'antd/dist/antd.css';

export default class teacher extends Component {

    state = {
        page:1,
        total:12,
        list:[]
    }

    componentWillMount(){


        window.scroll(0,0);
        
        //教师列表

        this.getData(1);
        
    }

    getData=(page)=>{

        let param = {
            page:this.state.page
        }

        getApiTeachersList(param)
        .then( req =>{
            if(req.data.code === 1){
                let data = req.data.data;
                this.setState({
                    total:data.total,
                    list:data.list,
                })
            }
        }).catch( err =>{
            console.error(err);
        })
    }

    gotoPage=(page)=>{
        this.props.history.push(page);
    }

    changePage=(page)=>{
        console.log(page);
        this.getData(page);
    }

    render() {
        return (
            <div className="teacher">
                <Header />
                <div className="main">
                    <div className="cen">
                        <div className="box">
                            <div className="thead">
                                <div>
                                    <img className="img" alt="" src="assets/imgs/weizhi.png" />
                                    <p className="p_point" onClick={()=>{this.gotoPage('/')}}>首页</p>
                                    <img className="icon" alt="" src="assets/imgs/more.png" />
                                    <p>名师列表</p>
                                </div>
                            </div>

                            <div className="list">
                                {
                                    this.state.list.map((item,index)=>{
                                        return <div className="item" key={index} onClick={()=>{this.gotoPage('/teacherinfo?id='+item.id)}}>
                                            <div className="itop" style={{backgroundImage:"url('"+item.path_text+"')"}}></div>
                                            <div className="idiv">
                                                <div className="itext">
                                                    <h2>{item.name}</h2>
                                                    <p>{item.title}</p>
                                                </div>
                                                <h4>{item.desc.substring(0,80)}</h4>
                                            </div>
                                        </div>
                                    })
                                }
                            </div>

                            <div className='r_page'>
                                <Pagination type="success" showSizeChanger={false} pageSize={25}  defaultCurrent={this.state.page} total={this.state.total} onChange={(page)=>{this.changePage(page)}} />
                            </div>
                        </div>
                    </div>
                </div>
                <Footer />
            </div>
        )
    }
}
